<template>
    <div>
        <div style="margin:10px auto; width:900px">
            <i-table :data="lines" :columns="columns" size="small" stripe border :disabled-hover="true"></i-table>
        </div>
    </div>
</template>
<style>
    .ivu-table-small td {height: 30px !important}
    .addTh .ivu-table-cell {width:100%;text-align: center}
</style>

<script>
    let newLine = () => {
        return {i:[0,0,0,0],m:0}
    }
    let figure = (ii)=>{
        return Math.max.apply(null, ii) - Math.min.apply(null, ii)
    }
    let COL_1 = [0,1,2,3,4,9]
    let COL_2 = [5,6,7,8]

    const MAX = 20

    export default {
        data () {
            return {
                lines:[],
                columns: [
                    { title: "", type: "index", width: 60 },
                    { 
                        title: "自变量(输入 0-9 的数值)",
                        render:(h,p)=>{
                            let ns = []
                            for(let i=0;i<4;i++){
                                ns.push(h('InputNumber',{
                                    style:{width:'60px'},
                                    props: {size:"small", max:9, min:0, value:p.row.i[i]},
                                    on:{
                                        'on-change':(v)=>{
                                            this.onChange(p.index,i,v)
                                        }
                                    }
                                }))
                            }
                            return ns
                        }
                    },
                    { 
                        title: "第二列",width:265,
                        render:(h,p)=> h('ButtonGroup',{props:{size:"small"}}, COL_1.map((v,i)=>{
                            return h('Button', {
                                style:{width:'38px'},
                                props:{type:p.row.m==v?"success":"ghost"}
                            }, v)
                        }))
                    },
                    {
                        title:"第三列", width:190,
                        render:(h,p)=> h('ButtonGroup',{props:{size:"small"}},COL_2.map((v,i)=>{
                            return h('Button', {
                                style:{width:'39px'},
                                props:{type:p.row.m==v?"success":"ghost"}
                            }, v)
                        }))
                    },
                    { 
                        width:90,className:'addTh',
                        renderHeader: (h, p) => {
                            return h('Button', {
                                props: { size: "small", type: "ghost", shape: "circle", icon: "ios-plus-empty" },
                                nativeOn: {
                                    click: () =>  this.add()
                                }
                            })
                        },
                        render:(h,p)=> h('ButtonGroup',{props:{size:"small"}},[
                            h('Button', {
                                attrs: { title: "全部还原为 0"},
                                props: { type: "ghost", icon: "ios-reload"},
                                nativeOn: {
                                    click: () => this.$set(this.lines, p.index, newLine())
                                }
                            }),
                            h('Button', {
                                attrs: { title: "删除此行"},
                                props: { type: "ghost", icon: "ios-trash"},
                                nativeOn: {
                                    click: () => this.lines.splice(p.index, 1)
                                }
                            })
                        ])
                    }
                ]
            }
        },
        methods: {
            onChange (line, i, v){
                console.log(line, i , v)
                let l = this.lines[line]
                let is = l.i
                is[i] = v
                //重新计算 m 值
                this.$set(this.lines, line, Object.assign(l,{i:is, m:figure(is)}))
            },
            add (){
                this.lines.push(newLine())
                if(this.lines.length>MAX){
                    this.lines.shift()
                    M.warn("当前数据超出"+MAX+"行，第一行被清除...")
                }
                    
            }
        },
        mounted () {
            this.lines.push(newLine())
        }
    }
</script>